﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Signup.aspx.cs" Inherits="EarringsRecommendationWeb.Signup" %>

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Signup</title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom CSS --> 
   
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrapValidator.js"></script>
     <script type="text/javascript" src="js/bootbox.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#form-nav-bar').load('navbar.html');
            $.getScript("js/Login.js", function () { });
        });
    </script>
    <script src="js/toast.js" type="text/javascript"></script>
</head>
<body>
    <div class="alert alert-success" role="alert" style="display:none; z-index: 1000; position: absolute; left:0px; top: 50px;">
      <span>populate alert</span>
    </div>
    
    <!-- Navigation -->
   <nav id="form-nav-bar" class="navbar navbar-inverse navbar-static-top" role="navigation">
     
        <!-- /.container -->
    </nav>

    <form id="signupForm" runat ="server" method="post" >
    <div class="container">
    <div class="col-xs-6">    
      <div class="form-group">        
        <label class="control-label" for="txt-email">อีเมล์</label>
        <input type="text" class="form-control" id="txt-form-email" placeholder="อีเมล์" name="txtEmail">
        <span id="email-error" class="help-block with-errors"></span>
        <div class="help-block with-errors"></div>
      </div>

      <div class="form-group">
        <label class="control-label" for="txt-member-name">ชื่อ-นามสกุล</label>
        <input type="text" class="form-control" id="txt-member-name" placeholder="ชื่อ นามสกุล" name="txtName" >
      </div>
      <div class="form-group">
        <label class="control-label" for="txt-address">ที่อยู่</label>
        <textarea class="form-control" id="txt-address" placeholder="ที่อยู่" rows="4" name="txtAddress"></textarea> 
      </div>     
      <div class="row">
        <div class="col-xs-6 form-group">
          <label class="control-label" for="txt-telephone">เบอร์โทรศัพท์ติดต่อ</label>
          <input type="text" class="form-control" id="txt-telephone" placeholder="โทรศัพท์" name="txtTelephone" >          
        </div>
        <div class="col-xs-6 form-group">
          <label class="control-label" for="txt-post-code">รหัสไปรษณีย์</label>
          <input type="text" class="form-control" id="txt-post-code" placeholder="รหัสไปรษณีย์" name="txtPostCode" >          
        </div>
      </div>
      <div class="row">
        <div class="col-xs-6 form-group">       
          <label class="control-label" for="txt-password">รหัสผ่าน</label>
          <input type="password" class="form-control" id="txt-password-signup" placeholder="รหัสผ่าน" name="txtPassword" >        
        </div>
        <div class="col-xs-6 form-group">
      
          <label class="control-label" for="txt-confirm-password">ยืนยันรหัสผ่าน</label>       
          <input type="password" class="form-control" id="txt-confirm-password" placeholder="ยืนยันรหัสผ่าน" name="txtConfirm">
        </div>
      </div>
      <button type="submit" class="btn btn-primary" id="btn-signup-submit" >สมัครสมาชิก</button>
    </div>
    </div>
    </form>    

    <script type="text/javascript">
        var isUpdate = false;
        function loadData() {
            var mem = membersignup[0];
            $('#txt-form-email').val(mem.Email);
            $('#txt-form-email').prop('disabled', 'true');

            $('#txt-member-name').val(mem.Name);
            $('#txt-address').val(mem.Address);
            $('#txt-telephone').val(mem.Telephone);
            $('#txt-post-code').val(mem.PostCode);
            $('#txt-password-signup').val(mem.Password);
            $('#txt-confirm-password').val(mem.Password);
            $('#btn-signup-submit').html('บันทึก')

            isUpdate = true;
        }
        $(document).ready(function () {
            if (typeof membersignup != 'undefined') {
                loadData();
            }

            $('#signupForm')
                .bootstrapValidator({
                    //... options ...
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        txtEmail: {
                            verbose: false,
                            validators: {
                                notEmpty: {
                                    message: 'กรุณาระบุอีเมล์'
                                },
                                emailAddress: {
                                    message: 'กรุณาระบุอีเมล์ให้ถูกต้อง'
                                },
                                remote: {
                                    url: 'WSRestFul.asmx/IsDuplicateEmail',
                                    data: function (validator) {
                                        return {
                                            txtEmail: validator.getFieldElements('txtEmail').val()
                                        };
                                    },
                                    message: 'อีเมล์นี้มีอยู่ในระบบแล้ว กรุณาสมัครด้วยอีเมล์อื่น',
                                    type: 'POST'
                                }
                            }
                        },
                        txtPostCode: {
                            message: 'รหัสไปรษณ๊ย์ไม่ถูกต้อง',
                            validators: {
                                notEmpty: {
                                    message: 'กรุณาระบุรหัสไปรษณีย์'
                                }
                            }
                        },
                        txtPassword: {
                            validators: {
                                notEmpty: {
                                    message: 'กรุณาระบุรหัสผ่าน'
                                },
                                identical: {
                                    field: 'txtConfirm',
                                    message: 'กรุณายืนยันรหัสผ่านให้ถูกต้อง'
                                },
                                stringLength: {
                                    min: 6,
                                    message: 'รหัสผ่านต้องไม่ต่ำกว่า 6 ตัวอักษร'
                                }
                            }
                        },
                        txtConfirm: {
                            message: 'กรุณายืนยันรหัสผ่าน',
                            validators: {
                                identical: {
                                    field: 'txtPassword',
                                    message: 'กรุณายืนยันรหัสผ่านให้ถูกต้อง'
                                },
                                notEmpty: {
                                    message: 'กรุณายืนยันรหัสผ่าน'
                                }
                            }
                        }
                    }
                })//bootstrapValidator
                .on('success.form.bv', function (e) {
                    // Prevent form submission
                    e.preventDefault();

                    // Get the form instance
                    var $form = $(e.target);
                    // Get the BootstrapValidator instance
                    var bv = $form.data('bootstrapValidator');

                    // Use Ajax to submit form data
                    if (isUpdate) {
                        updateMember($form);
                    } else {
                        goSave($form);
                    }
                });//on success.form.bv
        });//document.ready

        function updateMember($form) {
            var email = document.getElementById('hidden-email').value;
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'WSRestFul.asmx/UpdateMember',
                data: $form.serialize() + '&txtEmail=' + email
            })
              .done(function (data) {
                  if (data.result === "success") {
                      Toast.init({
                          "selector": ".alert-success"
                      });
                      Toast.show("<strong>Update completed!!!</strong>");
                  } else {
                      Toast.init({
                          "selector": ".alert-danger"
                      });
                      Toast.show("<strong>Error on saving!!!<strong> " + data);
                  }
              })//done
              .fail(function (data) {
                  bootbox.dialog({
                      title: 'Fatal Error',
                      message: '<div class="alert alert-danger" role="alert"><strong>Error in connection !!!</strong></div>'
                  });
              });//fail
        }

        function goSave($form) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'WSRestFul.asmx/SaveNewMember',
                data: $form.serialize()
            })
            .done(function (data) {
                if (data.result === "success") {
                    Toast.init({
                        "selector": ".alert-success"
                    });
                    Toast.show("<strong>Save completed!!!</strong> redirecting ...<br/>Please <strong>sign in</strong> with your email");
                    setTimeout(function () { window.location = "home.aspx" }, 3000);
                } else {
                    Toast.init({
                        "selector": ".alert-danger"
                    });
                    Toast.show("<strong>Error on saving!!!<strong> " + data);
                }
            })//done
            .fail(function (data) {
                bootbox.dialog({
                    title: 'Fatal Error',
                    message: '<div class="alert alert-danger" role="alert"><strong>Error in connection !!!</strong></div>'
                });
            });//fail
        }//goSave

        $(window).load(function () {
            setTimeout(function () { displayItemQuantity(); }, 1000);
        });
    </script>
    
</body>
</html>